<template>
	<view class="page">
		<view class="header">
			<view class="header-1">
				<u-icon name="arrow-leftward" color="323233" size="18" @click="toGoBack()" />
			</view>
			<view class="header-2">
				{{ examInfo.examId }}
			</view>
			<view class="header-3"></view>
		</view>
		<view class="content" style="padding-bottom: 60px;">
			<view class="auth-content">
        <view class="auth-content-score" :class="examInfo.myScore >= examInfo.passLine ? 'success' : 'error' ">
          <view>{{ examInfo.myScore }}分</view>
        </view>
				<template class="exam-item" v-for="(currentQuestion, currentIndex) in examInfo.temsexamtaskresultList">
					<!-- 判断题 -->
					<view class="examination-content" v-if="currentQuestion.questionType == 'determine'" :key="currentIndex">
						<view class="examination-content-t">
							<view class="examination-content-t-t">{{ currentIndex + 1 }}、{{ currentQuestion.title }}</view>
							<view class="examination-content-t-t"
								v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
								<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage+item"
									style="width: 100%;">
								</image>
							</view>
							<view :class="['examination-content-t-c', currentQuestion.isAnswers == 1 && currentQuestion.answers == JSON.parse(currentQuestion.options)[currentQuestion.myAnswers].content ? 'success' : 'error']">
							<!-- // <view :class="['examination-content-t-c', currentQuestion.myAnswers == JSON.parse(currentQuestion.options)[currentQuestion.myAnswers].content ? 'success' : 'error']"> -->
								<view :class="['edit-content-right-item-2', option.myanswer ? 'choose' : '']"
									v-for="(option, i) in JSON.parse(currentQuestion.options)" :key="i">
									{{ option.title }}
								</view>
							</view>
						</view>
					</view>

					<!-- 填空题 -->
					<view class="examination-content1" v-if="currentQuestion.questionType == 'blank'" :key="currentIndex">
						<view class="examination-content-t">
							<view class="examination-content-t-t">{{ currentIndex + 1 }}、{{ currentQuestion.title }}</view>
							<view class="examination-content-t-t"
								v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
								<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage+item"
									style="width: 100%;">
								</image>
							</view>
							<view class="examination-content-t-c1">
								<view v-for="(option, i) in JSON.parse(currentQuestion.options)" :key="i"
									:class="['fillList', currentQuestion.isAnswers == 1 && option == JSON.parse(currentQuestion.myAnswers)[i] ? 'success' : 'error']">
									<view>填空1</view>
									<view class="uni-input">{{ JSON.parse(currentQuestion.myAnswers)[i] }}</view>
								</view>
								<!-- <view class="">
									<text>填空2</text>
									<u-input type=" text" v-model="currentQuestion.answer" name="account" class="uni-input" placeholder="请输入内容"
										:clearable="true"></u-input>
								</view> -->
							</view>
						</view>
					</view>

					<!-- 选择题 -->
					<view class="examination-content2" v-if="currentQuestion.questionType == 'multiple'" :key="currentIndex">
						<view class="examination-content-t">
							<view class="examination-content-t-t">{{ currentIndex + 1 }}、{{ currentQuestion.title }}</view>
							<view class="examination-content-t-t"
								v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
								<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage+item"
									style="width: 100%;">
								</image>
							</view>
							<view :class="['examination-content-t-c2']">
								<view class="edit-content-right-item-2" v-for="(option, i) in JSON.parse(currentQuestion.options)" :key="i"
									:class="[{ 'choose': option.myanswer }, { 'success': option.isanswer}, { 'error': !option.isanswer }]">
									<text>{{ option.label }}</text>
									<text style="padding-left: 16px;">{{ option.content }}</text>
									<view style="flex: 1; padding-left: 16px;" v-if="option.img && option.img.length > 0">
										<image v-for="(item, index) in option.img" :key="index" :src="fileImage+item" style="width: 100%;" />
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 问答题 -->
					<view class="examination-content2" v-if="currentQuestion.questionType == 'answers'" :key="currentIndex">
						<view class="examination-content-t">
							<view class="examination-content-t-t">{{ currentIndex + 1 }}、{{ currentQuestion.title }}</view>
							<view class="examination-content-t-t"
								v-if="currentQuestion.titleImgs && JSON.parse(currentQuestion.titleImgs).length > 0">
								<image v-for="(item, index) in JSON.parse(currentQuestion.titleImgs)" :key="index" :src="fileImage+item"
									style="width: 100%;">
								</image>
							</view>
							<view class="examination-content-t-c2">
								<view :class="['uni-input', currentQuestion.isAnswers == 1 && currentQuestion.myAnswers == currentQuestion.answers ? 'success' : 'error']">{{ currentQuestion.myAnswers }}</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="submitButton">
			<navigator url="/pages/learnCenter/learnCenter" class="uButton">关闭</navigator>
		</view>
	</view>
</template>

<script>
	import { analysisExamTask } from '@/api/index.js'
	export default {
		data() {
			return {
				fileImage: this.$globalSetting.fileImage,
				examInfo: {
					examId: '',
					temsexamtaskresultList: []
				}
			}
		},
		onLoad(e) {
			this.loadExamInfo(e.id)
		},
		methods: {
			toGoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * 加载考试解析
			 * @param {Object} id
			 */
			loadExamInfo(id) {
				analysisExamTask(id).then(res => {
					this.examInfo = res.data;
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: center;
		background: #fff;

		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;

			.header-1 {
				margin: 30rpx 0 0 38rpx;
				justify-content: center;
				align-items: center;

			}

			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}

			.header-3 {
				flex: 1;
			}
		}

		.content {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			position: relative;
			height: calc(100vh - 50px);

			.auth-content {
				height: 100%;
				overflow: auto;
			}
      .auth-content-score{
        width: 686rpx;
        height: 364rpx;
        padding-top: 20rpx;
        box-sizing: border-box;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        font-size: 56rpx;
        font-weight: 700;
        &.success{
          background-image: url("/static/score-success.png");
          background-size: cover;
         }
         &.error{
          background-image: url("/static/score-error.png");
          background-size: cover;
         }
      }

			.item {
				margin: 0 32rpx 0 32rpx;
				height: 278rpx;
				background: #F6F8FC;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					width: 100%;
					display: flex;
					margin-left: 0;
					flex-direction: row;
					position: relative;
					text-align: left;
					height: 44rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #323233;
					line-height: 44rpx;
					font-style: normal;
				}

				.twoButton {
					width: 608rpx;
					display: flex;
					margin: 16rpx 0 0 0;
					flex-direction: row;
					position: relative;

					.btn1 {
						position: absolute;
						left: 0;
						width: 88rpx;
						height: 40rpx;
						background: #1DB712;
						border-radius: 4rpx;
						text-align: left;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}

					.btn11 {
						background: #2265EE !important;
					}

					.btn12 {
						background: #323233 !important;
					}

					.btn2 {
						position: absolute;
						right: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 40rpx;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 28rpx;
						color: #969799;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.line {
					margin-top: 80rpx;
					width: 622rpx;
					height: 2rpx;
					background: #EBEDF0;
				}

				.twoButton21 {
					.btn1 {
						background: #fff !important;
						border: 2rpx solid #E2E7F5 !important;
						color: #8B8A92 !important;
					}

					.btn2 {
						background: #F0EFF4 !important;
						color: #8B8A92 !important;
					}
				}

				.twoButton22 {
					width: 608rpx;
					display: flex;
					justify-content: flex-end;
					/* 添加这一行以使子元素靠右对齐 */
					flex-direction: row;
					position: relative;
					margin: 24rpx 0 0 0;
					display: flex;
					flex-direction: row;
					text-align: right;
					gap: 32rpx;
					float: right;

					.btn1 {
						background: #fff;
						color: #646566;
						border: none;
						height: 64rpx;
						border-radius: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						.llText {
							display: flex;
							flex-direction: row;
							align-items: center;

							.score {
								margin-left: 16rpx;
								margin-right: 8rpx;
								font-weight: bold;
								font-size: 48rpx;
								color: #D91515;
								line-height: 52rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}

					.btn2 {
						background: #fff;
						color: #646566;
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						.jnText {
							display: flex;
							flex-direction: row;
							align-items: center;

							.score {
								margin-left: 16rpx;
								margin-right: 8rpx;
								font-weight: bold;
								font-size: 48rpx;
								color: #2265EE;
								line-height: 52rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}
				}

				.twoButton2 {
					width: 608rpx;
					display: flex;
					justify-content: flex-end;
					flex-direction: row;
					position: relative;
					margin: 24rpx 0 0 0;
					display: flex;
					flex-direction: row;
					text-align: right;
					gap: 32rpx;
					float: right;

					.btn1 {
						width: 176rpx;
						height: 64rpx;
						border-radius: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 2rpx solid #2265EE;
						font-weight: 400;
						font-size: 28rpx;
						color: #2265EE;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}

					.btn2 {
						width: 176rpx;
						height: 64rpx;
						background: #2265EE;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 36rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}

		.examination-content {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 16px;

			.examination-content-t {
				width: 100%;
				height: 100%;
				background-color: #F6F7FB;

				.examination-content-t-t {
					padding: 16px 16px 0;
				}

				.examination-content-t-h {
					padding-top: 24px;
					display: flex;
					justify-content: center;
					align-items: center;

					view:nth-child(1) {
						text-align: left;
						width: 74px;
						height: 32px;
						background-color: #000;
						color: #fff;
						text-align: center;
						line-height: 32px;
						border-radius: 0 100px 100px 0;
					}

					view:nth-child(2) {
						flex: 1;
						font-weight: 500;
						font-size: 12px;
						color: #101112;
						line-height: 18px;
						text-align: right;
						font-style: normal;
						margin-right: 13px;
					}
				}

				.examination-content-t-c {
					width: 100%;
					height: auto;
					box-sizing: border-box;
					padding: 0 16px 16px;
					margin-top: 16px;

					.edit-content-right-item-2 {
						padding: 8px 30px;
						background-color: #fff;
						border-radius: 5px;
						margin-bottom: 10px;
						position: relative;
					}

				}

				.examination-content-t-c.success {

					.edit-content-right-item-2.choose {
						border: 1px solid green;
					}
					.edit-content-right-item-2.choose::after {
						position: absolute;
						right: 10px;
						top: 50%;
						transform: translate(0, -50%);
						color: green;
						content: "√";
						font-weight: 600;
					}
				}

				.examination-content-t-c.error {

					.edit-content-right-item-2.choose {
						border: 1px solid red;
					}
					.edit-content-right-item-2.choose::after {
						position: absolute;
						right: 10px;
						top: 50%;
						transform: translate(0, -50%);
						color: red;
						content: "×";
						font-weight: 600;
						font-size: 20px;
					}
				}
			}
		}

		.examination-content1 {
			width: 100%;
			box-sizing: border-box;
			padding: 0 16px;

			.examination-content-t {
				width: 100%;
				height: auto;
				background-color: #F6F7FB;

				.examination-content-t-t {
					padding: 16px 16px 0;
				}

				.examination-content-t-h {
					padding-top: 24px;
					display: flex;
					justify-content: center;
					align-items: center;

					view:nth-child(1) {
						text-align: left;
						width: 74px;
						height: 32px;
						background-color: #000;
						color: #fff;
						text-align: center;
						line-height: 32px;
						border-radius: 0 100px 100px 0;
					}

					view:nth-child(2) {
						flex: 1;
						font-weight: 500;
						font-size: 12px;
						color: #101112;
						line-height: 18px;
						text-align: right;
						font-style: normal;
						margin-right: 13px;
					}
				}

				.examination-content-t-c1 {
					width: 100%;
					height: auto;
					box-sizing: border-box;
					padding: 0 16px 16px;
					margin-top: 16px;

					.fillList {
						display: flex;
						align-items: center;
						background-color: #fff;
						padding: 3px 8px;
						border-radius: 5px;
						position: relative;

						.uni-input {
							height: 40px;
							line-height: 40px;
							padding-left: 24px;
						}
					}

					.fillList.success {
						border: 1px solid green;
					}
					.fillList.success::after {
						position: absolute;
						right: 20px;
						top: 50%;
						transform: translate(0, -50%);
						color: green;
						content: "√";
						font-weight: 600;
					}

					.fillList.error {
						border: 1px solid red;
					}
					.fillList.error::after {
						position: absolute;
						right: 20px;
						top: 50%;
						transform: translate(0, -50%);
						color: red;
						content: "×";
						font-weight: 600;
						font-size: 20px;
					}

					.c-t {
						image {
							border-radius: 8px;
							width: 100%;
							height: 174px;
						}
					}

					.c-t1 {
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						padding: 16px;

						view:nth-child(1) {
							flex: 2;
						}

						view:nth-child(2) {
							flex: 10;

							image {
								border-radius: 8px;
								width: 100%;
								height: 142px;
							}
						}
					}
				}
			}
		}


		.examination-content2 {
			width: 100%;
			box-sizing: border-box;
			padding: 0 16px;
			overflow: auto;

			.examination-content-t {
				width: 100%;
				height: auto;
				background-color: #F6F7FB;

				.examination-content-t-t {
					padding: 16px 16px 0;
				}

				.examination-content-t-h {
					padding-top: 24px;
					display: flex;
					justify-content: center;
					align-items: center;

					view:nth-child(1) {
						text-align: left;
						width: 74px;
						height: 32px;
						background-color: #000;
						color: #fff;
						text-align: center;
						line-height: 32px;
						border-radius: 0 100px 100px 0;
					}

					view:nth-child(2) {
						flex: 1;
						font-weight: 500;
						font-size: 12px;
						color: #101112;
						line-height: 18px;
						text-align: right;
						font-style: normal;
						margin-right: 13px;
					}
				}

				.examination-content-t-c2 {
					width: 100%;
					height: auto;
					box-sizing: border-box;
					background-color: #F6F7FB;
					box-sizing: border-box;
					padding: 16px 16px;

					.edit-content-right-item-2 {
						padding: 8px 16px;
						background-color: #fff;
						margin-bottom: 10px;
						border-radius: 5px;
						display: flex;
						align-items: center;
						border: 1px solid #fff;
						position: relative;
					}

					.edit-content-right-item-2.choose.success {
						border: 1px solid green;
					}
					.edit-content-right-item-2.choose.success::after {
						position: absolute;
						right: 20px;
						top: 50%;
						transform: translate(0, -50%);
						color: green;
						content: "√";
						font-weight: 600;
					}
					.edit-content-right-item-2.choose.error {
						border: 1px solid red;
					}
					.edit-content-right-item-2.choose.error::after {
						position: absolute;
						right: 20px;
						top: 50%;
						transform: translate(0, -50%);
						color: red;
						content: "×";
						font-weight: 600;
						font-size: 20px;
					}

					.uni-input {
						height: 80px;
						border-radius: 5px;
						padding: 8px 16px;
						position: relative;
					}
					.uni-input.success {
						border: 1px solid green;
					}
					.uni-input.success::after {
						position: absolute;
						right: 20px;
						top: 50%;
						transform: translate(0, -50%);
						color: green;
						content: "√";
						font-weight: 600;
					}
					.uni-input.choose.error::after {
						position: absolute;
						right: 20px;
						top: 50%;
						transform: translate(0, -50%);
						color: red;
						content: "×";
						font-weight: 600;
						font-size: 20px;
					}
				}
			}
		}
	}
	.fixeds {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #2265EE;
		color: #fff;
		text-align: center;
		border-radius: 5px;
		padding: 10px;
		box-sizing: border-box;
	}

	.submitButton {
		padding: 16px;
		margin-top: 20px;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.uButton {
		width: 100%;
		text-align: center;
		line-height: 44px;
		height: 44px;
		background-color: #2265EE;
		border-radius: 22px;
		color: #fff;
	}
</style>
